<template>
  <view class="template-choose flex gap-2 flex-wrap">
    <left-right-img-box
      v-for="item in workFlowTemps"
      :key="item.key"
      :left-image-url="item.leftImgUrl"
      :right-image-url="item.rightImgUrl"
      :title="item.title"
      @tap="onChooseModel(item)"
    />
  </view>
</template>

<script lang="ts" setup>
import LeftRightImgBox from "@/components/LeftRightImgBox.vue";
import { CreationTypeEnum, WorkFlowTypeEnum } from "@/utils/enums";
import { useWorkflowStore } from "@/store/index";
const ossUrl = import.meta.env.VITE_OSS_API;
const workflowStore = useWorkflowStore();

const workFlowTemps = ref([
  {
    leftImgUrl: `${ossUrl}assets/lineCreate2.png`,
    rightImgUrl: `${ossUrl}assets/lineCreate1.png`,
    title: "线稿生成",
    key: WorkFlowTypeEnum.PICTURE_CREATE_BY_LINE,
  },
  {
    leftImgUrl: `${ossUrl}assets/modelRender2.svg`,
    rightImgUrl: `${ossUrl}assets/modelRender1.svg`,
    title: "模型渲染",
    key: WorkFlowTypeEnum.MODEL_RENDER,
  },
  {
    leftImgUrl: `${ossUrl}assets/buildreBuild2.svg`,
    rightImgUrl: `${ossUrl}assets/buildreBuild1.svg`,
    title: "旧房改造",
    key: WorkFlowTypeEnum.OLD_BUILDING_REBUILD,
  },
  {
    leftImgUrl: `${ossUrl}assets/roomRebuild2.svg`,
    rightImgUrl: `${ossUrl}assets/roomRebuild1.svg`,
    title: "房间装修",
    key: WorkFlowTypeEnum.ROOM_REBUILD,
  },
  {
    leftImgUrl: `${ossUrl}assets/remove2.svg`,
    rightImgUrl: `${ossUrl}assets/remove1.svg`,
    title: "灵感迁移",
    key: WorkFlowTypeEnum.INSPIRATION_MOVE,
  },
]);

// goTo创作页面
const onChooseModel = (info: (typeof workFlowTemps.value)[0]) => {
  workflowStore.setWorkflowType(info.key);
  uni.navigateTo({
    url: `/pages/create/index?tab=${CreationTypeEnum.WORK_FLOW}&title=${info.title}&key=${info.key}`,
  });
};
</script>
